<!--
 * @Description: 地图
 * @Author: charles
 * @Date: 2021-05-05 23:34:12
 * @LastEditors: liuyunlong
 * @LastEditTime: 2022-01-10 10:48:06
-->
<template>
  <div ref="map_container" style="height: 95%">地图</div>
</template>
<script>
import {} from "../../../utils/request";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      //地图初始化

      var map = new AMap.Map(this.$refs.map_container, {
        pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: "3D", // 地图模式
      });
      // 行政区轮廓
      let polygons = [];
      var opts = {
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "district", //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions("all");
      district.search("太谷区", function (status, result) {
        map.remove(polygons); //清除上次结果
        polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
        map.setFitView(polygons); //视口自适应
      });

      //3、点标记

      // 创建一个 Marker 实例：
      //1.
      var marker1 = new AMap.Marker({
        position: [112.583804, 37.423954], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
       // icon:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.witcp.com%2Fpic%2Fgd4%2Falicdn%2Fserver%2Fimgextra%2Fi4%2F2625773206%2FTB2slUtXu7JL1JjSZFvXXccYFXa_%21%212625773206.jpg_310x310.jpg&refer=http%3A%2F%2Fpic.witcp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644374748&t=093b00bad23a5352000798617ae77f3b",
        title: "山西农业大学 可用车辆：25",
        
      });
      map.add(marker1);
      //2.
      var marker2 = new AMap.Marker({
        position: [112.577956, 37.449429], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "晋中信息学院  可用车辆：25",
      });
      map.add(marker2);
      //3.
      var marker3 = new AMap.Marker({
        position: [112.568805, 37.422011], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "友好医院  可用车辆：25",
      });
      map.add(marker3);
      //4.
      var marker4 = new AMap.Marker({
        position: [112.570565, 37.421892], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "太谷站  可用车辆：25",
      });
      map.add(marker4);

      //5.

      var marker5 = new AMap.Marker({
        position: [112.565393,37.421602], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "阳光花园  可用车辆：25",
      });
      map.add(marker5);

      //6.

      var marker6 = new AMap.Marker({
        position: [112.626401,37.451774], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "太谷东站  可用车辆：25",
      });
      map.add(marker6);
      //7.
      var marker7 = new AMap.Marker({
        position: [112.5095,37.44755], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "太谷西站  可用车辆：25",
      });
      map.add(marker7);
      //8.
      var marker8 = new AMap.Marker({
        position: [112.663709,37.428515], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "净信寺  可用车辆：25",
      });
      map.add(marker8);
      //9.
      var marker9 = new AMap.Marker({
        position: [112.687827,37.393883], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "二佛山  可用车辆：25",
      });
      map.add(marker9);

      //10.
      var marker10 = new AMap.Marker({
        position: [112.626029,37.413656], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "新村村  可用车辆：25",
      });
      map.add(marker10);
      //11.
      var marker11 = new AMap.Marker({
        position: [112.594347,37.388595], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "候城乡卫生院  可用车辆：25",
      });
      map.add(marker11);
      //12.
      var marker12 = new AMap.Marker({
        position: [112.590807,37.38914], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "候城乡政府  可用车辆：25",
      });
      map.add(marker12);
      //13.
      var marker13 = new AMap.Marker({
        position: [112.59395,37.385245], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "南山居  可用车辆：25",
      });
      map.add(marker13);
      //14.
      var marker14 = new AMap.Marker({
        position: [112.59865,37.376783], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "鬼岭山庄旅游区  可用车辆：25",
      });
      map.add(marker14);
      //15.
      var marker15 = new AMap.Marker({
        position: [112.571012,37.368871], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "双东小学  可用车辆：25",
      });
      map.add(marker15);
      //16.
      var marker16 = new AMap.Marker({
        position: [112.540413,37.370713], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北张联合小学  可用车辆：25",
      });
      map.add(marker16);
      //17.
      var marker17 = new AMap.Marker({
        position: [112.539941,37.364335], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "关帝庙  可用车辆：25",
      });
      map.add(marker17);
      //18.
      var marker18 = new AMap.Marker({
        position: [112.571141,37.356591], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "山西黄河中药有限公司  可用车辆：25",
      });
      map.add(marker18);
      //19.
      var marker19 = new AMap.Marker({
        position: [112.497326,37.34083], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "山西省农科院果树研究所  可用车辆：25",
      });
      map.add(marker19);
      //20.
      var marker20 = new AMap.Marker({
        position: [112.603885,37.406448], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "太谷区装修公司  可用车辆：25",
      });
      map.add(marker20);
      //21.
      var marker21 = new AMap.Marker({
        position: [112.591354,37.362997], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "凤凰山森林公园",
      });
      map.add(marker21);
      //22.
      var marker22 = new AMap.Marker({
        position: [112.554059,37.402054], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "康源小区",
      });
      map.add(marker22);
      
    },
  },
};
</script>
